<template>
  <div class="xtx-home-page">
    <div class="home-entry">
      <div class="container">
        <!-- 左侧分类 -->
        <HomeCategory />
        <!-- 轮播图 -->
        <div class="banner-box">
          <XtxCarousel :sliders="banner" autoPlay></XtxCarousel>
        </div>
      </div>
    </div>
    <!-- 内容主体区域 -->
    <!-- 新鲜好物 -->
    <HomeNew></HomeNew>
    <!-- 人气商品 -->
    <HomeHot></HomeHot>
    <!-- 热门品牌 -->
    <HomeBrand></HomeBrand>
    <!-- 商品区块 -->
    <HomeGoods></HomeGoods>
    <!-- 最新专题 -->
    <HomeSpecial></HomeSpecial>
  </div>
</template>

<script>
import HomeCategory from './components/home-category.vue'
import HomeNew from './components/home-new.vue'
import HomeHot from './components/home-hot.vue'
import HomeBrand from './components/home-brand.vue'
import HomeGoods from './components/home-goods.vue'
import HomeSpecial from './components/home-special.vue'
import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
  name: 'Home',
  components: {
    HomeCategory,
    HomeNew,
    HomeHot,
    HomeBrand,
    HomeGoods,
    HomeSpecial
  },
  setup() {
    // 轮播图数据
    const store = useStore()
    const banner = computed(() => {
      return store.state.category.banner
    })
    return { banner }
  }
}
</script>

<style lang="less" scoped>
.banner-box {
  width: 1240px;
  height: 500px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 98;
  .xtx-carousel {
    width: 100%;
    height: 100%;
    // 覆盖组件库的样式
    ::v-deep {
      .carousel-btn.prev {
        left: 270px;
      }
      .carousel-indicator {
        padding-left: 250px;
      }
    }
  }
}
</style>
